<template>
  <el-dialog title="局部打印" :visible.sync="visible" :before-close="handleClose" width="30%">
    <div class="print">
      <span class="content">这是我们希望打印的内容</span>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="print">打 印</el-button>
    </span>
  </el-dialog>
</template>

<script setup>
  import {
    ref
  } from 'vue';

  const visible = ref(false);

  const print = () => {
    window.print();
  };

  const handleClose = () => {
    visible.value = false;
  };
  
</script>


<style scoped lang="scss">
  .print {
    background-color: #fff;
    height: 100%; // 盖住body

    @media print {
      body * {
        visibility: hidden;
      }

      &,
      & * {
        visibility: visible;
      }

      position: fixed; // 把内容定住
      left: 0;
      top: 0;
    }
  }
</style>